<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge″/>
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
<div id="app">
    <el-container v-show="show=='list'" v-loading="loading">
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">数据中心</el-breadcrumb-item>
                <el-breadcrumb-item>非标库</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-header>

            <el-row>
                <a href="/dataCenter/nslAddSku.page">
                    <el-col :xs="8" :sm="8" :md="4" :lg="2" :xl="2">
                        <el-button type="primary" icon="el-icon-edit" :offset="6">新增</el-button>
                    </el-col>
                </a>
                <el-col :xs="14" :sm="14" :md="8" :lg="8" :xl="8">
                    <el-input placeholder="请输入内容" @keyup.enter.native="enterSearch" v-model="keySearch">
                        <el-button slot="append" icon="el-icon-search" @click=search></el-button>
                    </el-input>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-table :data="tableData" stripe border style="width:100%" highlight-current-row size="mini"
                      tooltip-effect="dark" height="calc(100vh - 240px)">
                　　
                <el-table-column label="序号" align="center" width="50px">
                    　　
                    <template scope="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template>
                </el-table-column>
                <el-table-column prop="sku_code" label="编号" align="center" :show-overflow-tooltip=true>
                    　　
                </el-table-column>
                　　
                <el-table-column prop="sku_name" label="名称" align="center" :show-overflow-tooltip=true>
                    　　
                </el-table-column>
                <el-table-column prop="sku_brand" label="品牌" align="center" :show-overflow-tooltip=true>
                    　　
                </el-table-column>
                <el-table-column prop="sku_unit" label="单位" align="center" :show-overflow-tooltip=true>
                    　　
                </el-table-column>
                <el-table-column prop="sku_slug_set" label="规格参数" align="center" :show-overflow-tooltip=true>
                    　　
                </el-table-column>
                <el-table-column prop="sku_price" label="价格" align="center" :show-overflow-tooltip=true>
                    　　
                </el-table-column>
            <el-table-column label="操作" align="center" min-width="100px" fixed="right">
            <template slot-scope="scope">
            <#--<el-button type="text" @click="modify(scope.row.sku_code)">修改</el-button>-->
                <el-button type="text" @click="cancel(scope.row.sku_code)">作废</el-button>
            </template>
            </el-table-column>

            </el-table>
        </el-main>
        <el-footer>
            <el-row>
                <el-col>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :page-sizes="[100, 500, 1000]" :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="totalRecords" >
                    </el-pagination>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
    <el-container v-show="show=='update'">
        <el-header>
        </el-header>
        <el-main>
            <el-form ref="SKU" :model="SKU" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :xs="24" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="编号" prop="sku_code">
                            <el-input :disabled="true" v-model="SKU.sku_code"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="名称" prop="sku_name">
                            <el-input v-model="SKU.sku_name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="品牌" prop="sku_brand">
                            <el-input v-model="SKU.sku_brand"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="18" :lg="12" :xl="12">
                        <el-form-item label="单位" prop="sku_unit">
                            <el-select v-model="SKU.sku_unit" filterable placeholder="请选择单位" style="width:100%">
                                <el-option v-for="unit in unitList" :key="unit.unit_name" :label="unit.unit_name"
                                           :value="unit.unit_name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="规格参数">
                            <el-input v-model="SKU.sku_slug_set"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="价格" prop="sku_price">
                            <el-input v-model.number="SKU.sku_price"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submit('SKU')">提交</el-button>
                    <el-button @click="modifyBack">返回</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                loading:false,
                rules: {
                    sku_name: [{
                        required: true,
                        message: '请输入SKU名称',
                        trigger: 'blur'
                    }],
                    sku_brand: [{
                        required: true,
                        message: '请输入品牌',
                        trigger: 'blur'
                    }],
                    sku_price: [{
                        required: true,
                        message: '请输入价格',
                        trigger: 'blur'
                    }, {
                        type: 'number',
                        message: '价格必须为数字值'
                    }],
                },
                tableData: [],
                currentPage: 1, //当前页
                pageSize: 100, //每页总数
                totalRecords: 0, //总条数
                keySearch: '',
                show: "list",
                SKU: {},
            };

        },

        methods: {
            <#--submit: function (formName) {-->
                <#--this.loading=true;-->
                <#--var SKU = this.SKU;-->
                <#--this.$refs[formName].validate((valid) => {-->
                    <#--if (valid) {-->
                        <#--var boolean = false;-->
                        <#--var msg = '';-->
                        <#--$.ajax({-->
                            <#--url: "${url}/nsl/updateSkuData.json",-->
                            <#--type: "POST",-->
                            <#--data: SKU,-->
                            <#--success: (result) =>{-->
                                <#--this.loading=false;-->
                                <#--if (result.ret) {-->
                                    <#--this.$message({-->
                                        <#--message: '操作成功',-->
                                        <#--type: 'success'-->
                                    <#--});-->
                                    <#--setTimeout(function () {-->
                                        <#--window.location.href = "/nsl/nslIndex.page";-->
                                    <#--}, 1000);-->
                                <#--}else{-->
                                    <#--this.$message.error(result.msg);-->
                                <#--}-->
                            <#--}-->
                        <#--});-->
                    <#--} else {-->
                        <#--this.$message({-->
                            <#--message: '警告，请填写必填字段',-->
                            <#--type: 'warning'-->
                        <#--});-->
                        <#--this.loading=false;-->
                        <#--return false;-->
                    <#--}-->
                <#--});-->
            <#--},-->
            modifyBack: function () {
                this.$refs.upload.clearFiles();
                this.show = 'list';
            },
            //查看
            detail: function (sku_code) {
                $.ajax({
                    url: '/dataCenter/nslDetail.json',
                    data: {
                        sku_code: sku_code
                    },
                    type: 'get',
                    dataType: 'json',
                    success: (result)=> {
                        if (result.ret) {
                            this.SKU = result.data;
                        } else {
                            this.$message.error("请求失败，请稍后重试");
                        }
                    }
                });
            },
            //修改
            // modify: function (sku_code) {
            //     this.unitAjax();
            //     this.detail(sku_code);
            //     this.SKU.sku_price = parseInt(this.SKU.sku_price);
            //     this.show = 'update';
            // },
            //回车监听事件获取输入内容
            enterSearch: function (event) {
                this.currentPage=1;
                this.pageSize=100;
                this.keySearch = event.target.value;
                this.ajaxFunction()
            },
            //点击事件获取输入内容
            search: function () {
                this.currentPage=1;
                this.pageSize=100;
                this.ajaxFunction()
            },
            //作废
            cancel: function (sku_code) {
                this.$confirm('此操作将永久作废该SKU, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.loading = true;
                    this.SKU.requestType = 'cancel';
                    this.SKU.sku_code = sku_code;
                    delete this.SKU.create_date;
                    $.ajax({
                        url: '/dataCenter/nslEdit.json',
                        type: 'POST',
                        data: this.SKU,
                        dataType: 'json',
                        success: (result) => {
                            if (result.ret) {
                                this.ajaxFunction();
                                this.$message({
                                    type: 'success',
                                    message: '操作成功!'
                                });
                            } else {
                                this.$message.error("请求失败，请稍后重试");
                            }
                            this.loading = false;
                        }
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.ajaxFunction()
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.ajaxFunction()
            },
            ajaxFunction: function () {
                $.ajax({
                    url: '/dataCenter/nslList.json?page='+this.currentPage+'&limit='+this.pageSize+'&param='+this.keySearch,
                    type: 'get',
                    dataType: 'json',
                    success: (result)=> {
                        if (result.ret) {
                            this.tableData = result.data;
                            this.totalRecords = result.count;
                        }else{
                            this.$message.error('请求失败，请稍后重试');
                        }
                    }
                });
            },
            //获取单位列表
            unitAjax: function () {
                $.ajax({
                    url: '/dataCenter/unitList.json?page=0&limit=0',
                    type: 'get',
                    success: (result) => {
                        if (result.ret) {
                            this.unitList = result.data;
                        } else {
                            this.$message.error('单位列表请求失败，请稍后重试');
                        }
                    }
                });
            },
        },
        mounted: function () {
            this.ajaxFunction();
        },
    })
</script>

</body>

</html>